

jBGallery.MenuSlider = function(el, data, engine, caption, options){
    
    var that = el;
    var _cnt = el;//options.fullscreen ? 'body' : el;//jbox
    
  //TEMP: bug. el width simetimes in chrome = 0
  if(options.fullscreen) 
        var _bw = $('body').width() - 130;
  else
      var _bw = $(_cnt).width() - 130;
    
    var _w = (_bw) - (_bw % 60);
  var _sep = '<span>&nbsp;|&nbsp;</span>';
    var _popup = '<a href="#" class="jbgs-h-close">'+options.labels.close+'</a>';//TEST
    var _info = '<a href="#" class="jbgs-h-info">'+options.labels.info+'</a>';
    var _tpl_top = '<div class="jbgs-top"><div class="jbgs-top-center"><a href="#" class="jbgs-h jbgs-h-prev">&nbsp;</a><a href="#" class="jbgs-h jbgs-h-next">&nbsp;</a></div><div class="jbgs-top-right"></div></div>';//<div id="jbgs-top-opacity"></div>
    var _tpl_slider = '<div class="jbgs-opacity"></div><div class="jbgs"><div class="jbgs-wrapper"><div class="jbgs-left"><a href="#" class="jbgs-h-play jbgs-h">&nbsp;</a><a href="#" class="jbgs-h-pause jbgs-h">&nbsp;</a><a href="#" class="jbgs-h-left jbgs-h">&nbsp;</a></div><div class="jbgs-viewer" style="width:'+_w+'px"></div><div class="jbgs-right"><a href="#" class="jbgs-h-right jbgs-h">&nbsp;</a></div></div></div>';
    var _top, _menu,_menutop,_viewer,_an,_play,_pause,_a,_autohide;
    var _init = false;
    var _length = engine.length();
    //PRIVATE METHODS
    
    function _click_and_lock(el , func){
        $(el).click(function(){
            var _el = this;
            if($(_el).is(".lock"))
                return;
            $(_el).addClass("lock");
            func(function(){
                $(_el).removeClass("lock")
            });
            return false;//15/12/2010
        });
    }
    function _get_optimal_position(nr){
        nr = nr - 1;
        nr = _get_first_of_last(nr);
        var _left = -(nr * 60) <= 0 ? -(nr * 60) : 0;
        
        return _left;
    }
    function _get_first_of_last(nr){
        var _tot = engine.length;
        var _v = _get_visible();
        return _tot - _v < nr ? _tot - _v : nr;         
    }
    function _focus(nr){
        $('a',_an)
        .find(".focus").removeClass("focus").css("opacity",'0.7').end()
        .eq((nr - 1)).find("img").addClass("focus").css("opacity",'1')
        .parent().addClass("focus").css("opacity",'1');
    }
    function _get_class_thumb(t){
        return t.height >= t.width ? "jbgs-thumb-portrait" : "jbgs-thumb-landscape";
    }
    function _get_optimal_left(t){
        if(t.height >= t.width){
            return 25;
        }else{
            var _v = t.width*100/t.height;
            return (_v - 60)/2;
        }
    }
    function _left(left, callback){
        _an.animate({"left" : left}, function(){
            if(callback) callback();
        });
    }
    function _move_left(callback){
        var _l = _get_left();
        var _v = _get_visible();
        //_l = (_l + 60) > 0 ?  0 : (_l + 60);
        _l = (_l + (60 * _v)) > 0 ?  0 : (_l + (60 * _v));
        _left(_l, callback);
    }
    function _move_right(callback){
        var _l = _get_left();
        var _tot = engine.length();
        var _back = _get_back(_l);
        var _v = _get_visible();
        var _max = (_tot - _v) * 60;
    if(_tot < _v || _v + _back >= _tot)
            return callback();//unlock!
        _l = ((_back + _v) + _v) > _tot ?  -(_max) : (_l - (60 *_v));//todo
        _left(_l, callback);
    }
    function _is_visible(nr){
        var _l = _get_left();
        var _back = _get_back(_l);
        var _v = _get_visible();
        
        var _first = _get_first_visible(_back, _v);
        var _last = _get_last_visible(_back, _v);

        return (nr >= _first && nr <= _last);
    }
    function _get_last_visible(back, v){
        return back + v;
    }
    function _get_first_visible(back, v){
        return back + 1;
    }
    function _get_left(){
        return parseInt(_an.css("left"),10);
    }
    function _get_visible(){
        var _bw = $(_cnt).width() - 130;
        var _w = (_bw) - (_bw % 60);
        return _w / 60;
    }
    function _get_back(left){
        return Math.abs(left)/ 60;// - 60 (right)
    }
    function _mouseout(ev){
        $('a',_an).css("margin-top", "");
        $('.jbgs-thumb').fadeOut(options.timers.fade, function(){
            $(this).remove();
        });
    }
    function _delegation(ev){
        var _el = ev.target || ev.srcElement;
        if(_el.tagName.toString().toLowerCase() === 'img'){
            $(_el).parent().parent().css("margin-top", "3px");//21/06 + .parent()
            var _index = $(_a).index($(_el).parent().parent());//21/06 + .parent()
            var _thumb = $(_el).get(0);
            var _img = new Image();
            _img.src = _thumb.src;
                
            var _id = 'jbgs-thumb-'+_index;
            var _l = $(_thumb).parents("li:eq(0)").offset().left - $(el).offset().left;//19/12/2010
            var _class = _get_class_thumb(_img);
            var _m = _l - _get_optimal_left(_img);
            if($("#"+_id).length == 0){
                var _btn = options.ie6 || options.ie7 ? '' : '<div class="jbgs-thumb-btn"><div class="jbgs-thumb-tip" /></div>';
                var _html = '<div style="left:'+_m+'px" class="jbgs-thumb" id="'+_id+'"><img src="'+_thumb.src+'" alt="" class="'+_class+'" />'+_btn+'</div>';
                $(_html).hide().appendTo(_cnt).fadeIn(options.timers.fade);    
            }
        }
    }
    function _resize(){
        var _bw = $(_cnt).width() - 130;
        var _w = (_bw) - (_bw % 60);
        _viewer.width(_w);
    }
    //RC2 - 21/06/2010 - TODO config width/height
    function _get_thumb_position(t){
        return t.height >= t.width ? {top : -((t.height*51/t.width)-51)/2} : {left : -((t.width*51/t.height)-51)/2 }; 
    }
    function _set_thumb_class(t){
        $(t).addClass(_get_class_thumb(t)).css(_get_thumb_position(t));
    }
    function _thumb_oncomplete(img){
        $(img).wrap('<div />');
        if (img.complete) {
            _set_thumb_class(img);
        }else{
            $(img).one("load", function(){
                _set_thumb_class(img); 
            });
        }
    }
  function _add_thumb(o, jmethod){
    var _t = $('<li><a title="' + o.title + '" href="' + o.href + '"><img src="' + o.thumb + '" alt="" /></a></li>')
        [jmethod](_menu);
        var _img = $('img', _t).css("opacity",0.7).get(0);
    _thumb_oncomplete(_img);
  }
    //3.0
  function _empty(){
    _an.empty();
    _autohide.hide(options.timers.fade);
    _length = engine.length();
  }
    function _add(o, jmethod, fromrender){
    if(!fromrender && !_init)
        _render();
      
    if ($.isArray(o)) {
      $.each(o, function(i, v){
        _add_thumb(v, jmethod)
      });
    }else{
      _add_thumb(o, jmethod)
    }
    //_autohide.hide();
    if(_length == 0 && !fromrender){
      _autohide.fadeIn(options.timers.fade);
    }
    _length = engine.length();
    }
    function _remove(selector){
    $('li'+selector, _menu).remove();
  }
    function _render(){
        if(!_init && engine.length() > 0){
            
      
            $(_cnt)
            .append(_tpl_top + _tpl_slider).addClass("jbgs-cnt");
            
            
            _menutop = $('.jbgs-top-right', el);
            _viewer = $('.jbgs-viewer', el);
            _menu = $('<div class="jbgs-inner"></div>').appendTo(_viewer);//???
      
            _an = $('.jbgs-inner', el);
            _play = $('.jbgs-h-play', el);
            _pause = $('.jbgs-h-pause', el);
            _a = $('a',_an);
            _autohide = $('.jbgs-opacity, .jbgs, .jbgs-top' ,el);
            
      _add(data.items(),'appendTo',true);
            
            $('.jbgs-opacity, .jbgs-h').css("opacity",0.8);
            
            if(engine.slideshow())
                _play.hide();
            else    
                _pause.hide();
                
            //events
            if (options.caption) {
                $(_info)
                .click(function(){
                    caption.toggle();
                    return false;
                })
                .appendTo(_menutop);
            }
            if (options.popup) {
                if($('a',_menutop).length > 0){
                    $(_sep).appendTo(_menutop);
                }
                $(_popup)
                .click(function(){
                    $(that).trigger("destroy");
                    options.close();
                    return false;//15/12/2010
                })
                .appendTo(_menutop);
            }
            _click_and_lock('.jbgs-h-left', _move_left);
            _click_and_lock('.jbgs-h-right', _move_right);
        
            _play.click(function(){
                $(this).hide();
                _pause.show();
                engine.play();
        return false;//20/12/2010
            });    
            _pause.click(function(){
                $(this).hide();
                _play.show();
                engine.stop();
                return false;//20/12/2010
            });
            $('.jbgs-h-prev',el).click(function(){
                engine.left();
                return false;//20/12/2010       
            });
            $('.jbgs-h-next',el).click(function(){
                engine.right();
                return false;//20/12/2010       
            });
            
            
            //$(_an).click(function(ev){
      //  var _el = ev.target || ev.srcElement;
      //  if (_el.tagName.toString().toLowerCase() === 'img') {
      $('a', _an).live("click", function(){
        var _i = $('a', _an).index(this) + 1;
        engine.go(_i);
        return false;
            });
        
            jBGallery.EventTimer(_an, ['mouseover'], options.delays.mouseover, _delegation, 'mouseout');//, true
            _an.bind("mouseout", _mouseout);//commenta per testare tooltip
                    
            engine.target.bind("load", function(){
                var _current = engine.current();
                if(!_is_visible(_current)){
                    var _position = _get_optimal_position(_current);
                    _left(_position);
                }
                _focus(_current);
            });
            
            jBGallery.EventTimer(window, ['resize.jbgallery'], options.delays.resize, _resize);
            
            if(options.autohide){
                jBGallery.AutoToggle(_autohide, options);
                jBGallery.AutoToggle(".jbgs-thumb", options, ["fadeIn","fadeOut"]);
            }
            
            _init = true;
        }
    }
    //MAIN
    _render();
    
    return {
        notify : function(m,o){
      switch(m){
        case 'empty':
            _empty();
        break;
        case 'push':
            _add(o,'appendTo');
                break;
                case 'unshift':
            _add(o, 'prependTo');
                break;
                case 'shift':
                    _remove(':first');
                break;
                case 'pop':
                    _remove(':last');
                break;
                
      }
        }
    }
};